<template>
    <div ref="chart" :style="{ width: '100%', height: '400px' }"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import { onMounted, ref, onBeforeUnmount } from 'vue';
  
  export default {
    name: 'ECharts',
    setup() {
      const chart = ref(null); // 引用 DOM 元素
      let chartInstance = null; // 存储 ECharts 实例
  
      onMounted(() => {
        // 初始化 ECharts 实例
        chartInstance = echarts.init(chart.value);
  
        // 配置图表选项
        const options = {
          title: {
            text: '示例柱状图',
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'line',
            },
          ],
        };
  
        // 设置图表配置
        chartInstance.setOption(options);
      });
  
      onBeforeUnmount(() => {
        // 销毁 ECharts 实例，避免内存泄漏
        if (chartInstance) {
          chartInstance.dispose();
        }
      });
  
      return {
        chart,
      };
    },
  };
  </script>
  
  <style scoped>
  /* 样式可以根据需求自定义 */
  </style>